<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
   <el-form-item label="业务单号：" prop="settlementChargeNumber">
      <el-input v-model="ruleForm.settlementChargeNumber" />
    </el-form-item>
    <el-form-item label="外协单位：" prop="settlementChargeConsignorUnit">
      <el-input v-model="ruleForm.settlementChargeConsignorUnit" />
    </el-form-item>
  <el-form-item label=" 结算方式：" prop="settlementChargeBillingmethod">
      <!-- <el-input v-model="ruleForm.settlementChargeBillingmethod" /> -->
      <el-radio-group v-model="ruleForm.settlementChargeBillingmethod">
        <el-radio :label="0">微信支付</el-radio>
        <el-radio :label="10">支付宝支付</el-radio>
        <el-radio :label="20">银联支付</el-radio>
        <el-radio :label="30">企业转账</el-radio>
        <el-radio :label="40">线下支付</el-radio>
        <el-radio :label="50">其它</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="吨位（立方米）：" prop="settlementChargeTonnage">
      <el-input v-model="ruleForm.settlementChargeTonnage" />
    </el-form-item>
    <el-form-item label="单价（元/立方米）：" prop="settlementChargeUnit">
      <el-input v-model="ruleForm.settlementChargeUnit" />
    </el-form-item>
    <el-form-item label="金  额：" prop="settlementChargeMoney">
      <el-input v-model="ruleForm.settlementChargeMoney" />
    </el-form-item>
    <el-form-item label="业务日期：" prop="settlementChargeDateBusiness">
          <el-date-picker
            v-model="ruleForm.settlementChargeDateBusiness"
            type="date"
            aria-label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
    </el-form-item>
    <el-form-item label="经办人：" prop="settlementChargeAttn">
      <el-input v-model="ruleForm.settlementChargeAttn" />
    </el-form-item>
    <el-form-item label="备  注：" prop="settlementRemark">
      <el-input v-model="ruleForm.settlementRemark" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMenuItem, type ComponentSize, type FormInstance, type FormRules,ElMessage } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';

const route = useRoute();
const router = useRouter();

 
 const selectedOption= null
const inputValue = ref('')
  const inputValues = ref(inputValue.value)
  const handleInputChange = (event: Event) => {
    inputValue.value = (event.target as HTMLInputElement).value
  }




interface RuleForm {
  settlementChargeNumber: string
  settlementChargeConsignorUnit: string
  settlementChargeOutsourcingUnit: string
  settlementChargeBillingmethod: string
  // settlementChargeBillingmethods: string
  settlementChargeTonnage: string
  settlementChargeUnit: string
  settlementChargeMoney: string
  settlementChargeDateBusiness: string
  settlementChargeAttn: string
  settlementChargeCheckName: string
  settlementRemark: ''
  settlementChargeBillingmethodText: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  settlementChargeNumber: '',
  settlementChargeConsignorUnit: '',
  settlementChargeOutsourcingUnit: '',
  settlementChargeBillingmethod: '',
  // settlementChargeBillingmethods: '',
  settlementChargeTonnage: '',
  settlementChargeUnit: '',
  settlementChargeMoney: '',
  settlementChargeDateBusiness: '',
  settlementChargeAttn: '',
  settlementChargeCheckName: '',
  settlementRemark: '',
  settlementChargeBillingmethodText: '',
})

const handleChange = (value: string) => {

  ruleForm.settlementChargeBillingmethod = value
}

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  settlementChargeNumber: [
     { required: true, message: '货主单号不能为空', trigger: 'blur' },
  ],
     settlementChargeOutsourcingUnit: [
     { required: true, message: '外协单位不能为空', trigger: 'blur' },
    ],
  // settlementChargeBillingmethod: [
  //   { required: true, message: '结算方式不能为空', trigger: 'blur' },
  //   // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  // ],
  settlementChargeTonnage: [
     { required: true, message: '吨位（立方米）不能为空', trigger: 'blur' },
    ],
  settlementChargeUnit: [
      { required: true, message: '单价（元/立方米）不能为空', trigger: 'blur' },
    ],
  settlementChargeMoney: [
    { required: true, message: '金 额不能为空', trigger: 'blur' },
    ],
  settlementChargeDateBusiness: [
    { required: true, message: '业务日期不能为空', trigger: 'blur' },
    ],
  settlementChargeAttn: [
    { required: true, message: '经办人不能为空', trigger: 'blur' },
    ],
  settlementRemark: [
    { required: true, message: '备 注不能为空', trigger: 'blur' },
  ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("Settlementwrite/api/SettlementCharges/Adds", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success('添加成功')
            console.log(res.data.data)
            router.push('/FeesPayableList')
          } else {
             ElMessage.success('添加失败')
          }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

// onMounted(() => {
//   handleChange();
// })
</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>